<template>
	<div class="position-relative h-100 d-flex1 flex-column1 lz-opticalbox_list">
		<div class="position-relative zone_select mb-2">
			<!-- <input readonly type="text" ref="zoneSelect" data-toggle="city-picker" data-responsive="true" class="w-100"> -->
			<el-input v-model="lockName" type="text" placeholder="请输入锁的名称" ref="zoneSelect" data-toggle="city-picker" data-responsive="true" class="w-100" />

			<div class="position-absolute" style="margin-left: 250px; top:0;">
				<el-button type="primary" size="mini" icon="el-icon-search" 
					@click="fetchRemote">搜索</el-button>
			</div>
		</div>

		<div class="w-100 mt-4 list-container" ref="container">
			<div class="box_item d-inline-block mr-3 mb-3 position-relative" 
                v-for="(item, index) of list" :key="index">
				<div class="box_top position-relative p-1">
					<div class="box_name">{{item.name}}</div>
					<div class="box_electric w-100 mb-1">
						<span>电量：</span>
						<b>{{item.electric}}</b>
					</div>
					<div class="box_electric w-100 mb-1">
						<span>位置：</span>
						<b>{{item.location}}</b>
					</div>
				</div>
				<div class="box_middle">
					<img v-if="item.electric > 20" src="./../../assets/opticalbox/gjx_icon_small_pre.png">
					<img v-else src="./../../assets/opticalbox/gjx_icon_small.png">
				</div>
				<div class="box_bottom w-100 position-absolute d-flex">
					<div @click="handelDetail(item, index, 1)" >入住信息</div>
					<div @click="handelDetail(item, index, 2)" >日志信息</div>
					<!-- <div @click="handelDetail(item, index, 3)" >卡面信息</div> -->
				</div>
			</div>
		</div>

        <el-pagination class="pagination pt-2 pb-2 justify-content-end" 
			:page-size.sync="numPerPage" 
			@current-change="currentChange"
            background layout="prev, pager, next" :total="totalElements"></el-pagination>

		<el-dialog :title="dialogTitle" :visible.sync="dialogBoxDetail" top="5vh" width="1200px">
			<LockBoxDetail :data="selectedRow" :type="selectedType" v-if="dialogBoxDetail" />
		</el-dialog>

	</div>
</template>

<script>
	import LockBoxDetail from './lock/LockBoxDetail.dialog.vue';
    import {mapState} from 'vuex';

	export default {
		name: 'OpticalBoxList',
		components: {
			// OpticalBoxDetail,
			LockBoxDetail
		},
		data() {
			return {
				lockName: '',
				list: [],
				dialogBoxDetail: false,
				loading: null,
				
                pageNum: 1,
				numPerPage: 50,
				
				totalPages: 0,
				totalElements: 0,

                selectedType: 1,
				selectedRow: null
			}
        },
        computed: {
            ...mapState({
                userInfo: 'userInfo'
            }),
            dialogTitle() {
                return {
                    1: '入住信息',
                    2: '日志信息',
                    3: '卡面信息'
                }[this.selectedType] || '门锁详情'
            }
        },
		created() {
            this.fetchRemote();
		},
		methods: {
			showLoading() {
				if (this.loading) this.loading.close();
				this.loading = this.$loading({
					fullscreen: true,
					lock: true,
					target: this.$refs.container
				});
			},
			fetchRemote() {
				if (this.loading) return this.$message({
					showClose: true,
					message: '正在加载...',
					type: 'warning'
				});
                this.showLoading();
				this.$obHttp.httpGet(this.$obHttp.Api.getLockList, {
					// "merNo": this.userInfo.businessCode, // bussinessCode
					"pageSize": this.numPerPage, //
					"pageIndex": this.pageNum, //
					"lockName": this.lockName,
					// "position": this.address, // a + c + p
				}).then(response => {
					this.loading.close();
					this.loading = null;
					if( response && response.result ){
						let {records, total, pages} = response.result;
						this.list = records;
						this.totalPages = pages;
						this.totalElements = total;
					}
				});
			},
			currentChange(currentPage){
				this.pageNum = currentPage;
				this.fetchRemote();
			},
			handelDetail(item, index, type) {
				this.selectedType = type;
				this.selectedRow = item;
				this.$nextTick(()=>this.dialogBoxDetail = true);
			}
		}
	}

</script>

<style lang="scss" scoped>
    .lz-opticalbox_list{
        overflow: hidden;
        .list-container{
            overflow: auto;
			min-height: 400px;
			max-height: 550px;
        }
    }
	.zone_select {
		width: 240px;
	}

	.box_item {
		width: 180px;
		height: 200px;
		// box-sizing: border-box;
		border: 1px solid #e4eeff;
		border-radius: 6px; overflow: hidden;
		text-align: center;
		font-size: 12px;
		.box_top {
			// background: rgba($color: #000000, $alpha: .35);
            background: rgba(#096dd9, .8);
			color: rgba($color: #fff, $alpha: .8);
			.box_electric {
				line-height: 1.3; text-align: left;
			}
			.box_name{
				word-break: break-all;
				position: absolute; right: 0; top: 0;
				background: #13c2c2; color: #fff;
				padding: 0 4px;
				border-bottom-left-radius: 4px;
				border-top-right-radius: 4px;
				height: 18px; line-height: 18px;
			}
		}
		.box_middle {
			width: 70px; height: 95px;
			position: absolute; left: 0; right: 0; top: 30px; bottom: 0; margin: auto;
			z-index: -1;
		}
		.box_bottom {
			cursor: pointer;
			left: 0; bottom: 0;
			height: 24px; 
            // background: rgba($color: #000000, $alpha: .55);
            background: #003a8c;
			text-align: center;
			justify-content: space-around;
			align-items: center;
			color: rgba($color: #fff, $alpha: .9);
            text-align: center;
			// div+div{ 
			// 	// border-left: 1px solid rgba($color: #fff, $alpha: .5);; 
			// 	// border-right: 1px solid rgba($color: #fff, $alpha: .5);; 
			// 	// padding: 0 3px;
			// }
		}
	}

</style>
